<template>
  <HomepageMenu :menuList="menuList" style="height: 56px"></HomepageMenu>
  <div id="TaskTodoList">
    <Breadcrumb content="业务列表" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <div class="smallToolTitle">数据表</div>
          <vxe-select
            v-model="tableName"
            @change="tableNameChange($event)"
            placeholder="请选择数据表"
            size="medium"
            class="selectTable"
          >
            <vxe-option
              v-for="item in tableNameOptions"
              :key="item.TABLE_NAME"
              :label="item.COMMENTS + '(' + item.TABLE_NAME + ')'"
              :value="item.TABLE_NAME"
            ></vxe-option>
          </vxe-select>
        </template>
      </vxe-toolbar>

      <div class="tableBox">
        <vxe-table
          ref="xTable"
          class="mytable-scrollbar"
          border
          align="center"
          height="auto"
          :data="tableData"
          :loading="showLoading"
          :columns="tableColumn"
          show-header-overflow
          show-overflow
          :row-config="{ isCurrent: true, isHover: true }"
          resizable
          keep-source
        >
          <vxe-column type="seq" width="5%"></vxe-column>
          <vxe-column
            v-for="config in tableColumn"
            :key="config.key"
            :type="config.type"
            :field="config.field"
            :title="config.title"
            :fixed="config.fixed"
            :width="config.width"
            :filters="config.filters"
          >
          </vxe-column>
        </vxe-table>

        <vxe-pager
          align="left"
          min-height="32px"
          :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize"
          :total="page.totalResult"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'Sizes',
            'FullJump',
            'Total'
          ]"
          @page-change="handleSizeChange($event)"
        ></vxe-pager>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import HomepageMenu from '@/components/HomePageMenu.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { AppStore } from '../../stores/store';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { formatDateTime } from '../../utils/common'; //格式化时间

// 全局变量定义区 ==========
let store = AppStore();
let { proxy }: any = getCurrentInstance();
let menuList: any = reactive([]);
const moduleId = localStorage.getItem('moduleId');
let tableData: any = reactive([]);
let tableNameOptions: any = reactive([]);
let tableName = ref('TRANSMIT_TODO_MESSAGE');
let tableColumn: any = reactive([]);
let showLoading = ref(false); //刷新加载状态
// 条数/页
const PageSizeList = [10, 15, 20, 50, 100];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[2],
  totalResult: 0
});

// 方法定义区 =============
onMounted(() => {
  getMenuList();
  findTableNames();
  getTableList();
  findtableColumn();
});

// 获取菜单树型数据
function getMenuList() {
  // 通过权限信息获取菜单
  let moduleMenuMap = store.userInfo.moduleMenuMap;
  if (Object.keys(moduleMenuMap).includes(moduleId)) {
    menuList.push(...moduleMenuMap[moduleId]);
  }
}
// 获取列表数据
function getTableList() {
  showLoading.value = true;
  tableData.length = 0;
  const url = '/api/task/public/getDynamicTablePageData';
  const obj = {
    tableName: tableName.value,
    pageIndex: page.currentPage,
    pageSize: page.pageSize
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      res.data.records.forEach((item: any) => {
        return (
          (item.START_TIME = formatDateTime(item.START_TIME, 'yyyy-MM-dd hh:mm:ss')) &&
          (item.TODO_TIME = formatDateTime(item.TODO_TIME, 'yyyy-MM-dd hh:mm:ss'))
        );
      });
      tableData.push(...res.data.records);
      page.totalResult = res.data.total;
      showLoading.value = false;
    })
    .catch((err: any) => {
      // VxeMessage('获取表格数据异常', VxeNotifyType.error);
      showLoading.value = false;
    });
}

//点击每页数量
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  getTableList();
}

function tableNameChange(item: any) {
  tableName.value = item.value;
  getTableList();
  findtableColumn();
}
// 获取表名options
function findTableNames() {
  const url = '/api/task/public/findTableNames';
  proxy.$http
    .get(url)
    .then((res: any) => {
      tableNameOptions.push(...res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取表名数据异常',VxeNotifyType.error)
    });
}
// 获取字段信息
function findtableColumn() {
  tableColumn.length = 0;
  const url = '/api/task/public/getColumnsByTableName/' + tableName.value;
  proxy.$http
    .get(url)
    .then((res: any) => {
      let columns = res.data.map((element: any, index: any) => {
        let columnObj = {
          key: index,
          field: element.columnName,
          title: element.comments,
          width: '11.5%'
        };
        return columnObj;
      });
      tableColumn.push(...columns);
    })
    .catch((err: any) => {
      // VxeMessage('获取字段信息异常',VxeNotifyType.error)
    });
}
</script>
<style lang="scss">
#TaskTodoList {
  width: 100%;
  height: calc(100% - 56px); //灰色背景
  .bodyContent {
    height: calc(100% - 60px);
    .selectTable {
      width: 300px;
      margin: 5px 0;
    }
    .tableBox {
      height: calc(100% - 40px);
      .vxe-table {
        height: calc(100% - 32px);
        background-color: $base-white;
        :deep(.vxe-table--render-wrapper) {
          height: 100%;
          .vxe-table--main-wrapper {
            height: 100%;
            .vxe-table--body-wrapper {
              height: calc(100% - 26px - 32px);
            }
          }
        }
      }
    }
  }
}
</style>
